<template>
  <view class="container" >
    <!-- 全屏广告 -->
    <!-- <view v-show="showAd" class="ad-container">
      <button @tap="closeAd">关闭</button>
    </view> -->
    
    <view class="header-title" :style="{ paddingTop: safeAreaInsets.top + 'px' }">言法数智法务</view>
    <!-- 导航栏 -->
    <view class="tab-bar">
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 0 }"
        @click="switchTab(0)"
      >
        法务对话
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 1 }"
        @click="switchTab(1)"
      >
        服务记录
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 2 }"
        @click="switchTab(2)"
      >
        法务报告
      </view>
    </view>
    
    <!-- 内容区域 -->
    <view class="content-container">
      <!-- 标签一内容 -->
      <view v-show="currentTab === 0" class="tab-content">
        <LegalDialogue />
      </view>
      
      <!-- 标签二内容 -->
      <view v-show="currentTab === 1" class="tab-content">
        <serviceRecord />
      </view>
      
      <!-- 标签三内容 -->
      <view v-show="currentTab === 2" class="tab-content">
        <LegalReport />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import LegalDialogue from './LegalDialogue.vue'
import LegalReport from './LegalReport.vue'
import serviceRecord from './serviceRecord.vue'


// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

// 当前选中的标签索引
const currentTab = ref(0)

// 控制广告显示状态
const showAd = ref(true)

// 切换标签的方法
const switchTab = (index) => {
  currentTab.value = index
}

// 关闭广告的方法
const closeAd = () => {
  showAd.value = false
}

// 页面加载时可以添加广告显示逻辑
onMounted(() => {
  // 这里可以添加广告展示统计逻辑
})
</script>

<style scoped>
.header-title{
  width: 100%;
  height: 176rpx;
  text-align: center;
  line-height: 176rpx;
  background: linear-gradient(  #E2EAFF, rgba(255,255,255,0)  );
  font-size: 34rpx;
}
.container {
  height: 100vh;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
}

/* 导航栏样式 */
.tab-bar {
  display: flex;
  background-color: white;
  border-bottom: 1rpx solid #eee;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 30rpx 0;
  font-size: 32rpx;
  color: #333;
  position: relative;
}

.tab-item.active {
  color: #007aff;
  font-weight: bold;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 6rpx;
  background-color: #007aff;
  border-radius: 3rpx;
}

/* 内容区域样式 */
.content-container {
  flex: 1;
}

.tab-content {
  height: 100%;
  background-color: white;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

.content-text {
  font-size: 36rpx;
  color: #333;
  display: block;
  margin-bottom: 30rpx;
}

.content-image {
  width: 100%;
  height: 400rpx;
  border-radius: 12rpx;
}

/* 广告样式 */
.ad-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.ad-content {
  position: relative;
  width: 80%;
  max-width: 1200rpx;
  background-color: white;
  border-radius: 20rpx;
  overflow: hidden;
}

.ad-image {
  width: 100%;
  height: auto;
  display: block;
}

.ad-close {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  width: 60rpx;
  height: 60rpx;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 48rpx;
}

.close-text {
  transform: translateY(-4rpx);
}
</style>    